<template>
  <div >
    <div class=" Mainbody">
      <div class="space"></div>
      <div class="progressive" v-for="(item,index) in imgList" :key="index">
        <img class="preview" v-progressive="item.img_address" :data-srcset="item.srcset" :src="item.img_address"
          width="100%" alt="">
      </div>
    </div>
  </div>
</template>
<script>

export default {
  components: {
  },
  data() {
    return {
      ImgStore: this.newStore,
      imgList: [],
    };
  },
  created() {
    this.getImgList();
  },
  methods: {
    getImgList() {
      this.spost(this.ImgStore, '/Photography/getPhotoList', {}).then((res) => {
        this.imgList = res.d.phototList;
      });
    },
  },
  mounted() {
    // this.$nextTick(() => {
    //   const coulomn = 3; // 列数
    //   const gap = 10; // 宽度\
    //   const heghitArr = [];
    //   setTimeout(() => {
    //     const domList = toRaw(myRef.value);
    //     const fatherWidth = document.getElementsByClassName('container')[0].offsetWidth;
    //     const itemWidth = (fatherWidth - gap * (coulomn + 1)) / coulomn; // 单张照片的宽度
    //     for (let i = 0; i < domList.length; i++) {
    //       const item = domList[i];
    //       item.style.width = `${itemWidth}px`;
    //       if (i < coulomn) {
    //         item.style.top = '0px';
    //         item.style.left = `${i * (itemWidth + gap)}px`;
    //         heghitArr.push(item.offsetHeight);
    //       } else {
    //         const minIndex = heghitArr.indexOf(Math.min(...heghitArr));
    //         item.style.left = `${domList[minIndex].offsetLeft}px`;
    //         item.style.top = `${heghitArr[minIndex] + gap}px`;
    //         heghitArr[minIndex] += item.offsetHeight + gap;
    //       }
    //     }
    //   }, 1000);
    // });
  },
};
</script>

<style lang="scss" scoped>
.Mainbody{
  columns:3;
  column-gap:15px;
  img{
    width: 100%;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    padding: 15px;
  }
}

</style>
